<template>
  <div>
    <div style="display: flex;flex-direction: column;align-items: center;width: 100%;">
      <div style="margin: 40px 0"><h1>{{ messageSort }}</h1></div>
      <el-card style="width: 80%;">
        <div
            style="display: flex;flex-direction: column;justify-content: space-around;align-items: center;margin-bottom: 50px">
          <div style="margin-top: 25px;width: 100%;display: flex;flex-direction: row;justify-content: space-around">
            <div>
              <label style="font-size: 16px;font-weight: 600">读取状态:</label>
              <el-select style="width: 150px;margin-left: 5px" value="searchDTO.status" v-model="searchDTO.isRead"
                         @change="initDate" clearable>
                <el-option value="1" label="已读"/>
                <el-option value="0" label="未读"/>
              </el-select>
            </div>
            <div v-show="messageSort === '我收到的建议'">
              <label style="font-size: 16px;font-weight: 600">医师描述:</label>
              <el-select style="width: 150px;margin-left: 5px" :value="searchDTO.office" v-model="searchDTO.office"
                         @change="initDate" clearable>
                <el-option v-for="item in roleOptions" :value="item.roleName" :key="item.id" :label="item.roleName"/>
              </el-select>
            </div>
            <el-input style="width: 300px;margin-right: 15px" prefix-icon="el-icon-search" placeholder="根据消息内容查询"
                      v-model="searchDTO.content">
              <el-button slot="append" icon="el-icon-search" @click="initDate"/>
            </el-input>
            <el-button type="primary" @click="markToRead">标记为已读</el-button>
            <el-button type="info" @click="markToUnRead">标记为未读</el-button>
            <el-button type="danger" @click="deleteInfos">批量删除</el-button>
          </div>
        </div>
        <el-table
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :data="tableData"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="读取状态">
            <template slot-scope="scope">
              <span :style="{color:(scope.row.isRead==0?'#FF0000':'#000')}" v-text="scope.row.isRead==0?'未读':'已读'"
                    style="font-size: 20px;font-weight: 600"></span>
            </template>
          </el-table-column>
          <el-table-column
              label="创建日期"
              width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.createDatetime }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="修改日期"
              width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.updateDatetime }}</span>
            </template>
          </el-table-column>
          <el-table-column
              min-width="200"
              prop="content"
              label="建议内容">
          </el-table-column>
          <el-table-column
              label="学生名称"
              width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="建议医师"
              width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.doctorName }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="office"
              label="医师描述"
              width="180">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="200">
            <template slot-scope="scope">
              <el-button icon="el-icon-search" size="small" @click="showInfo(scope.row)"></el-button>
              <el-button icon="el-icon-delete" size="small" @click="deleteInfo(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchDTO.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="searchDTO.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchDTO.total">
        </el-pagination>
      </el-card>
      <el-dialog
          :title=dialogTitle
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
          :modal="false">
        <el-row style="padding: 0 40px">
          <el-input type="textarea" :rows="5" disabled="true" v-model="messageDTO.content"></el-input>
        </el-row>

      </el-dialog>
    </div>

  </div>
</template>

<script>
import Message from '../../components/messages/index'


export default {
  name: "Info",
  data() {
    return {
      selectionItems: [],
      messageSort: "我收到的建议",
      searchDTO: {
        page: 1,
        rows: 5,
        userId: "",
        doctorId: "",
        content: "",
        isRead: "",
        total: 0,
        office: "",
      },
      messageDTO: {
        title: "",
        content: "",
        isRead: "",
        office: "",
        doctorId: "",
        status: "",
      },
      tableData: [],
      dialogVisible: false,
      dialogTitle: "",
      isShow: false,
      user: JSON.parse(localStorage.getItem("user")),
      roleData: {},
      roleOptions: [],
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectionItems = [];
      val.forEach(v => {
        this.selectionItems.push(v.id);
      });
    },
    handleSizeChange(val) {
      this.searchDTO.rows = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.searchDTO.page = val;
      this.initData();
    },
    //初始化数据
    initDate() {
      console.log("初始化方法中的 当前用户角色=====", this.roleData)
      let self = this;
      self.user = this.user;
      self.roleData = this.roleData;
      if (self.roleData.roleName === '普通用户') {
        self.messageSort = "我收到的建议";
      } else {
        self.messageSort = "我提出的建议";
      }
      if (self.messageSort == "我收到的建议") {
        self.searchDTO.userId = this.user.id;
        self.searchDTO.doctorId = null;
        console.log("我收到的建议=========", self.messageSort)
        self.$http.post("/suggestion/getInfoPage", self.searchDTO).then(res => {
          if (res.status == 200) {
            self.tableData = res.data.records;
            console.log("我收到的建议", self.tableData)
            self.searchDTO.total = res.data.total;
          }
        })
      } else {
        self.searchDTO.userId = null;
        self.searchDTO.doctorId = this.user.id;
        // console.log("我提出的建议=========", self.messageSort, self.searchDTO.doctorId)
        self.$http.post("/suggestion/getInfoPage", self.searchDTO).then(res => {
          console.log(res)
          if (res.status === 200) {
            self.tableData = res.data.records;
            // console.log("我提出的建议", self.tableData)
            self.searchDTO.total = res.data.total;
          }
        })
      }

    },
    //批量标记未已读
    markToRead() {
      if (this.selectionItems.length < 1) {
        this.$message.warning("至少需要选择一条数据")
      } else {
        this.$http.post("/suggestion/setInfoRead", {
          isRead: 1,
          ids: this.selectionItems
        }).then(res => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.initDate();
          }
        })
      }
    },
    //批量标记为未读
    markToUnRead() {
      if (this.selectionItems.length < 1) {
        this.$message.warning("至少需要选择一条数据")
      } else {

        this.$http.post("/suggestion/setInfoRead", {
          isRead: 0,
          ids: this.selectionItems
        }).then(res => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.initDate();
          }
        })
      }
    },
    //批量删除
    deleteInfos() {
      if (this.selectionItems.length < 1) {
        this.$message.warning("至少需要选择一条数据")
      } else {
        Message.confirm("是否需要删除这些通知？").then(() => {
          this.$http.post("/suggestion/deleteByIds", this.selectionItems).then(res => {
            if (res.status === 200) {
              Message.success("删除成功");
              this.initDate();
            }
          })
        })
      }
    },
    //单条查看
    showInfo(data) {
      this.dialogTitle = "查看健康建议";
      this.dialogVisible = true;
      this.messageDTO = data;
      this.isShow = true;
      console.log(data)
    },
    deleteInfo(data) {
      Message.confirm("是否需要删除此健康建议？").then(() => {
        let ids = [];
        ids.push(data.id);
        this.$http.post("/suggestion/deleteByIds", ids).then(res => {
          if (res.status === 200) {
            Message.success("删除成功");
            this.initDate();
          }
        })
      })
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getAllRole() {
      this.$http.get("/role/all").then(res => {
        if (res.status === 200) {
          this.roleOptions = res.data || [];
          // console.log(res.data)
        }
      })
    },
    getRoleDate() {
      this.$http.get("/role/get/" + this.user.roleId).then(res => {
        if (res.status === 200) {
          this.roleData = res.data;
          // console.log("当前用户权限======", this.roleData)
          this.initDate();
        }
      });
    }

  },
  created() {
    // alert("初始化")
    this.getRoleDate();
    this.getAllRole();

  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #bdbdbd;
}

/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.4);
}

/*IE滚动条颜色*/
html {
  scrollbar-face-color: #bfbfbf; /*滚动条颜色*/
  scrollbar-highlight-color: #000;
  scrollbar-3dlight-color: #000;
  scrollbar-darkshadow-color: #000;
  scrollbar-Shadow-color: #adadad; /*滑块边色*/
  scrollbar-arrow-color: rgba(0, 0, 0, 0.4); /*箭头颜色*/
  scrollbar-track-color: #eeeeee; /*背景颜色*/
}
</style>
